<!--热力图-->
<template>
  <div class="echartsBox">
    <div id="main" :style="{ height: '800px', width: '1200px' }"></div>
  </div>
</template>
<script>
  import mapJson from "./data/china.json";
  import geoCoordMap from "./data/geoCoordMap.json";
  import * as echarts from 'echarts'
  import {
    echartsDown
  } from '@/utils/index'

  export default {
    props: {
      title: {
        type: String,
        default: "",
      },
      changeData1: {
        type: Array,
        default: [],
      },
      subTitle: {
        type: String,
        default: "",
      },
      wordCloudData: {
        type: Array,
        default: () => [],
      },
      id: {
        type: String,
        default: "",
      },
    },
    data() {
      const that = this;
      return {
        myChart: null,
        option: {
          title: {
            text: this.title,
            subtext: this.subTitle,
            left: "center",
            top: "top",
            textStyle: {
              color: "#46b0df",
            },
          },
          // toolbox: {
          //   show: true,
          //   feature: {
          //     mark: { show: true },
          //     saveAsImage: {
          //       show: true,
          //       title: '保存图片',
          //       lang: ['点击保存']
          //     },
          //   },
          // },
          tooltip: {
            trigger: "item",
            formatter: (params) => {
              if (params.value) {
                return `${params.name}<br />销量：${params.value[2]}`;
              }
            },
            backgroundColor: "#fff2c0",
          },
          legend: {
            show: false,
          },
          // visualMap: {
          //   type: 'continuous',
          //   min: 0,
          //   max: 10000,
          //   text: ['多', '少'],
          //   seriesIndex: [1],
          //   dimension: 0,
          //   realtime: false,
          //   left: 0,
          //   itemWidth: 18,
          //   itemHeight: 100,
          //   calculable: true,
          //   inRange: {
          //       color: ['#46b0df'],
          //       symbolSize: [8, 8]
          //   },
          //   outOfRange: {
          //       color: ['#eeeeee'],
          //       symbolSize: [100, 100]
          //   }
          // },
          // backgroundColor: {
          //   type: 'linear',
          //   x: 0,
          //   y: 0,
          //   x2: 1,
          //   y2: 1,
          //   colorStops: [{
          //     offset: 0, color: '#0f2c70' // 0% 处的颜色
          //   }, {
          //       offset: 1, color: '#091732' // 100% 处的颜色
          //   }],
          //   globalCoord: false // 缺省为 false
          // },
          geo: {
            label: {
                      normal: {
                        show: true,
                        // fontSize: '14',
                        color: '#fff'
                      },
                      emphasis: {
                        color:'#010D39',
                    },
                    },
            // 设置地图的显示信息
            map: "china",
            width: "60%",
            zoom: 1, // 缩放比例
            show: true,
            roam: false, // 是否开启鼠标缩放和平移漫游
            top: "50",
            itemStyle: {
              areaColor: "#6A65CF9F",
              borderColor: "#6A65CF9F",
              shadowColor: "#6A65CF9F",
              shadowBlur: 20,
            },
          },
          series: [{
              type: "map",
              map: "china",
              geoIndex: 1,
              width: "60%",
              zoom: 1,
              top: "50",
              roam: false,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: true, // 存在legend时显示
              emphasis: {
                label: {
                  show: true, // 鼠标移入时区域上是否显示内容
                },
                itemStyle: {
                  areaColor: "#5350a5", // 鼠标移入时的颜色
                },
              },
              // label: {
              //   show: false
              // },
              itemStyle: {
                areaColor: "#6A65CF9F",
                borderColor: "#acb6c6",
                borderWidth: 1,
              },
            },
            {
              name: "城市",
              type: "scatter",
              coordinateSystem: "geo",
              data: this.convertData(this.changeData1),
              minVal: this.minVal,
              symbolSize: function(val) {
                return (
                  ((val[2] - that.minVal) / (that.maxVal - that.minVal || 1)) *
                  (20 - 12) +
                  12
                );
              },
              // label: {
              //   normal: {
              //     formatter: '{b}',
              //     position: 'right',
              //     show: false
              //   },
              //   emphasis: {
              //     show: false
              //   }
              // },
              itemStyle: {
                // color: "#46b0df",
                color: function(val) {
                  let num2 = that.maxVal-that.minVal
                  if(num2==0){
                    num2=val.value[2]
                  }
                  let num = val.value[2] / num2
                  let a = 110 * (1 - num) + 110;
                  return `rgb(255, ${a}, 100)`;
                },
                // color: function () {
                //   return (
                //     "rgb(" +
                //     [
                //       Math.round(Math.random() * 250),
                //       Math.round(Math.random() * 250),
                //       Math.round(Math.random() * 250),
                //     ].join(",") +
                //     ")"
                //   );
                // },
              },
            },
          ],
        },
      };
    },
    computed: {
      minVal() {
        let ary = [];
        this.changeData1.forEach((item) => {
          ary.push(item.sales);
        });
        return Math.min(...ary);
      },
      maxVal() {
        let ary = [];
        this.changeData1.forEach((item) => {
          ary.push(item.sales);
        });
        return Math.max(...ary);
      },
    },
    mounted() {
      // this.convertData()
      // this.initChart();
    },
    methods: {
      initChart() {
        console.log(this.changeData1, '00000');
        echarts.registerMap("china", mapJson, {});
        const dom = document.getElementById("main");
        this.myChart = echarts.init(dom);
        this.myChart.setOption(this.option);
      },
      convertData() {
        var res = [];
        for (var i = 0; i < this.changeData1.length; i++) {
          var geoCoord = geoCoordMap[this.changeData1[i].cityName];
          if (geoCoord) {
            res.push({
              name: this.changeData1[i].cityName,
              value: geoCoord.concat(this.changeData1[i].sales),
            });
          }
        }
        console.log(11111111,res)
        return res;
      },
      downEcharts() {
        echartsDown(this.myChart)
      },
    },
  };
</script>
<style>
  .echartsBox {
    padding-left: 0px
  }
</style>
